<template>
	<view class="contentView">
		<u-navbar title="站点选择" back-icon-color="#FFFFFF"  title-color="#FFFFFF" :border-bottom="false" :background="background">
			<!-- <view slot="right" class="jh_marginR20" style="font-size: 40rpx;color: #FFFFFF;"><u-icon name="search"></u-icon></view> -->
		</u-navbar>
		<view class="colorView bg-main"></view>
		
		<!-- 上车点 -->
		<view class="stationContentView">
			
			<!-- 标题：当前上车点 -->
			<view class="titleView">当前上车点</view>
			<!-- 放置站点的view -->
			<view class="stationView">
				<view class="deSelect" :class="{'select':startSelectIndex == index}" @tap="startStationClick(index)" v-for="(item,index) in startStationList" :key="index">
					<text class="deSelectColor" :class="{'selectColor' : startSelectIndex == index}">{{item.SiteName}}</text>
				</view>
			</view>
			
		</view>
		
		<!-- 选择下车点 -->
		<view class="stationContentView" style="margin-top: 20rpx;">
			<!-- 标题：选择下车点 -->
			<view class="titleView">选择下车点</view>
			<!-- 放置站点的view -->
			<view class="stationView">
				<view class="deSelect" :class="{'select':endSelectIndex == index}" @tap="endStationClick(index)" v-for="(item,index) in endStationList" :key="index">
					<text class="deSelectColor" :class="{'selectColor' : endSelectIndex == index}">{{item.SiteName}}</text>
				</view>
			</view>
		</view>
		
		<!-- 完成 -->
		<view class="doneView bg-main" @tap="doneClick">
			<text style="font-size: 36rpx;line-height: 100rpx;">完成</text>
		</view>
		
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				background: {
					background: 'linear-gradient(270deg, #FF763F, #FF423F)'
				},
				startSelectIndex:0,//记录上车点点击的下标
				endSelectIndex:0,//记录下车点点击下标
				startStationList:[],//上车点数组
				endStationList:[],//下车点数组
				startStation:'',//上车点
				endStation:'',//下车点
				startStationID:'',//上车点ID
				endStationID:'',//下车点ID
				stationArray:[],
				setoutTime:'',//发车时间
				userInfo:[],
				priceItem:[],
				scheduleInfo:[],
				stationAll:[],
				ScheduleAID:'',//班次ID
			}
		},
		onLoad(param) {
			_self = this;
			console.log(param);
			_self.stationArray = JSON.parse(decodeURIComponent(param.stationList));
			console.log(_self.stationArray);
			//上下车点总数组
			_self.startStationList = _self.stationArray.StartSites;
			_self.endStationList = _self.stationArray.EndSites;
			
			_self.getIndex(_self.startStationList,_self.endStationList);
		},
		methods: {
			getIndex:function(startStationList,endStationList){
				for(let i = 0; i < startStationList.length; i++){
					if(_self.stationArray.StationName == startStationList[i].SiteName){
						_self.startSelectIndex = i;
					}
				}
				for(let i = 0; i < endStationList.length; i++){
					if(_self.stationArray.EndSiteName == endStationList[i].SiteName){
						_self.endSelectIndex = i;
					}
				}
			},
			//--------------------------选中上车点--------------------------
			startStationClick(e){
				//给选择的下标赋值
				_self.startSelectIndex = e;
				//取出上车站点
				_self.startStation = _self.startStationList[e].SiteName;
				_self.startStationID = _self.startStationList[e].siteID;
				
			},
			//--------------------------选中下车点---------------------------
			endStationClick(e){
				//给选择的下标赋值
				_self.endSelectIndex = e;
				//取出下车站点
				_self.endStation = _self.endStationList[e].SiteName;
				_self.endStationID = _self.endStationList[e].siteID;
			},
			//--------------------------数组去重---------------------------
			arrayDistinct:function(array){
			    let siteNameArr = [];
			    for(let item of array){
					siteNameArr.push(item.siteID);
			    }
			    let distinctArr = array.filter((x,index) => {
					return siteNameArr.indexOf(x.siteID) == index
			    });
			    return distinctArr
			},
			//---------------------------点击完成---------------------------
			doneClick(){
				//获取选中站点的下标
				let startSelectIndex = _self.startSelectIndex;
				let endSelectIndex = _self.endSelectIndex;
				//点击完成时如果只选中了下车点没有选上车点，给上车点赋值上次选中的值
				if(_self.startStation == '') {
					_self.startStation = _self.startStationList[startSelectIndex].SiteName;
					_self.startStationID = _self.startStationList[startSelectIndex].siteID;
				}
				//点击完成时如果只选中了上车点没有选下车点，给下车点赋值上次选中的值
				if(_self.endStation == '') {
					_self.endStation = _self.endStationList[endSelectIndex].SiteName;
					_self.endStationID = _self.endStationList[endSelectIndex].siteID;
				}
				uni.$emit('stationChange', {
				    startStation: _self.startStation,
					endStation: _self.endStation
				});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page,.content {
		background-color: #F5F9FC;
		width: 100%;
		height: 100%;
	}
	/* 顶部显示颜色的view */
	.colorView {
		width: 100%;
		height: 120rpx;
	}
	/* 站点容器 */
	.stationContentView {
		margin-top: -50rpx;
		margin-left: 2%;
		margin-right: 2%;
		border-radius: 20rpx;
		width: 96%;
		background-color: #FFFFFF;
	}
	/* 标题view */
	.titleView {
		padding-top: 20rpx;
		padding-left: 32rpx;
		color: #333333;
		font-size: 34rpx;
		font-weight: 400;
	}
	/* 放置站点的view */
	.stationView {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 12rpx 20rpx;
		margin-bottom: 20rpx;
	}
	/* 站点名：未选中 */
	.deSelect {
		border: #e5e5e5 solid 2rpx;
		border-radius: 8rpx;
		justify-content: center;
		padding-bottom: 8rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin: 12rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}
	/* 未选中文字样式 */
	.deSelectColor {
		color: #333333;
		font-size: 26rpx;
		font-weight: 300;
		font-family:Source Han Sans SC;
	}
	/* 选中样式 */
	.select {
		border: #FC4646 solid 2rpx;
		border-radius: 8rpx;
		justify-content: center;
		padding-bottom: 8rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin: 12rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}
	/* 选中文字样式 */
	.selectColor {
		color: #FC4646;
		font-size: 26rpx;
		font-weight: 300;
		font-family:Source Han Sans SC;
	}
	// 完成
	.doneView {
		text-align: center;
		align-items: center;
		border-radius: 12rpx;
		// background-color: #FA5E6E;
		color: #FFFFFF;
		height: 100rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		font-size: 36rpx;
	}
</style>
